const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const { glob } = require('glob');
const html = ['index.html','index2.html'];
let files = glob.sync('src/**/*.html');
let htmls = files.map(res => {
  let template = res.replace(/\\/g,'/');
  let filename = template.replace('src/','');
  console.log(template,filename);
  return new HtmlWebpackPlugin({
    template: template,
    filename: filename,
    inject : 'body',
    minify : false,
  })
})
module.exports = {
  mode : 'development',
  entry : ['whatwg-fetch','core-js','./src/js/main.js'],
  output : {
    path: path.join(__dirname, "dist"),
    filename: "bundle.js",
  },
  plugins: [
    new webpack.ProvidePlugin({
      $ : 'jquery',
      jQuery : 'jquery',
      'window.jQuery' : 'jquery',
      // ...
    }),
    ...htmls,
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    client : {
      webSocketTransport : "sockjs"
    },
    webSocketServer : "sockjs",
    watchFiles : ['./src/*.html'],
    //open: true,
    hot: true,
  },
  module: { 
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader',{
          loader : 'css-loader',
        },{
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                [
                  'postcss-preset-env',
                  {
                    // 其他选项
                  },
                ],
                ['postcss-flexibility']
              ],
            },
          },
        }]
      },
      {
        test: /\.png|\.jpe?g|\.gif|\.svg|\.ttf|\.eot|\.woff2|\.woff|\.mp4$/,
        use: [{
          loader : 'file-loader',
          options : {
            outputPath: 'images',
            esModule: false
          }
        }],
      },
      {
        test: /\.scss$/,
        use: [ 'style-loader','css-loader',{
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                [
                  'postcss-preset-env',
                  {
                    // 其他选项
                  },
                ],
                ['postcss-flexibility']
              ],
            },
          },
        },'sass-loader']
      },
      //{
        //test: /\.html|\.tpl$/i,
        //use : [{
          //loader: 'html-withimg-loader',
        //}]
      //},
      {
        test : /\.js$/,
        //exclude: /node_modules/, // 排除依赖里的代码
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',{
                    "useBuiltIns": "entry",
                    "corejs" : "2.6.12"
                  }
                ]
              ],
              //plugins: ['@babel/plugin-transform-runtime']
            }
          },
        ]
      }
    ]
  },
  resolve : {
    alias : {
      '@' : path.resolve(__dirname,'src')
    },
  }
};
